import React from 'react';
import ReactDOM from 'react-dom';

//兄弟组件之间传值
class Component extends React.Component{
	//构造函数
	constructor(props){
		super(props);
		
		this.state = {
			data:'Old State'
		}
		console.log('Component constructor');
	}
	//组件将要加载
	componentWillMount(){
		console.log('componentWillMount');
	}
	//组件加载完成
	componentDidMount(){
		console.log('componentDidMount');
	}
	//将要接收父组件传来的props
	componentWillReceiveProps(){
		console.log('componentWillReceiveProps');
	}
	//子组件是不是应该更新
	shouldComponentUpdate(){
		console.log('shouldComponentUpdate');
		return true;
	}
	//组件将要更新
	componentWillUpdate(){
	    console.log('componentWillUpdate');	
	}
	//组件更新完成
	componentDidUpdate(){
		console.log('componentDidUpdate');	
	}
	//组件销毁时调用
	componentWillUnmount(){
		console.log('componentWillUnmount');
	}
	handleClick(){
		console.log('更新数据');
		this.setState({
			data:'New State'
		});
	}

	render(){
		console.log('render');
		return(
			<div>
				<h1>Props:{this.props.data}</h1>
				<button onClick={() => {this.handleClick()}}>更新组件</button>
			</div>
			);
	}
}


class App extends React.Component{
	//构造函数
	constructor(props){
		super(props);
		
		this.state = {
			data:'Old props',
			hasChild:true
		}
		console.log('App constructor');
	}
	onPropsChange(){
		console.log('这里是更新更新Props');
		this.setState({
			data:'New props'
		});
	}
	onDestoryChild(){
		console.log('干掉子组件');
		this.setState({

			hasChild:false
		});
	}
	render(){
		return(
			<div>
			{
				this.state.hasChild ? <Component data={this.state.data}/> : null
			}
			<button onClick={() => {this.onPropsChange()}}>改变Props</button>
			<button onClick={() => {this.onDestoryChild()}}>干掉子组件</button>
		    </div>
			);
	}
}

ReactDOM.render(
		<App/>,
	document.getElementById('app'));